<template>
  <div class="flex-x al-start" id="form-related-catalog">
    <biz-form-remote-select
      ref="product"
      :field="field"
      v-model="comValue"
      value-key="id"
      :remote-method="remoteMethod"
      @input="update"
      :cleared="true"
      :placeholder="placeholder || $t('common.placeholder.selectSomething', {0:$t('common.base.productType')})"
    >
      <div class="related-task-option" slot="option" slot-scope="{ option }">
        <div class="related-task-option-desc">
          <p>
            <span>{{ option.pathName }}</span>
          </p>
        </div>
      </div>
    </biz-form-remote-select>
    <el-button v-show="comValue.length" class="mar-l-10" @click="previewCatalog">{{$t('common.base.viewModule', {module:''})}}</el-button>
  </div>
</template>

<script>
/** api */
import { searchAllcatalog } from '@src/api/ProductV2Api';

/** mixin */
import FormMixin from '@src/component/form/mixin/form';

import {productSearchCatalog} from '@src/modules/guideForNewUser/initData.js'

import _ from 'lodash';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

export default {
  name: 'form-related-catalog',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array | String,
      default: () => [],
    },
  },
  data() {
    return {
      comValue: [],

      page: 1,
      pageSize: 20,
    };
  },
  watch: {
    value(val) {
      this.init(val);
    },
  },
  mounted() {
    this.init(this.value);
  },
  methods: {
    init(val) {
      if (val && val.length > 0) {
        let comValue = _.cloneDeep(val);
        this.comValue = comValue.map((item) => {
          item.label = item.pathName;
          return item;
        });
      }
    },
    remoteMethod(params) {
      console.log(productSearchCatalog);
      if(this.field.justGuide) return Promise.resolve(productSearchCatalog)
      let { keyword, pageNum, pageSize } = params;
      params = {
        pageNum,
        pageSize:50,
        keyWord: keyword,
      };

      return searchAllcatalog(params)
        .then((res) => {
          if (!res || !res.result || !res.result.list) return;
          res.result.list = res.result.list.map((item) =>
            Object.freeze({
              label: item.pathName,
              ...item,
            })
          );

          return res.result;
        })
        .catch((e) => console.error(e));
    },
    update(newValue) {
      console.log('newValue', newValue);
      this.inputForValue(newValue[0]);
    },
    previewCatalog(){
      if(!this.comValue.length) return

      console.log(this.comValue, this.value)
      // this.$platform.openTab({
      //   id: `productV2_catalog_view_${this.comValue[0].id}`,
      //   title: '产品类型详情',
      //   close: true,
      //   url: `/productV2/catalog/view?id=${this.comValue[0].id}`
      // });

      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductV2CatalogView,
        key: this.comValue[0].id,
        params: `id=${this.comValue[0].id}`
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.related-task-option {
  font-size: 12px;
}
</style>
